<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="../../../attr.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!doctype html>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="${ctx}/css/sapar.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/css/common.css"/>
<script type="text/javascript" src="${ctx}/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/js/sapar.js"></script>
<script type="text/javascript" src="${ctx}/js/WdatePicker.js"></script>
<script type="text/javascript" src="${ctx}/assets/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/imgs/ichart.1.2.1.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="${ctx}/js/mask.js"></script>

<style>
    .tab {
        border-collapse: collapse;
        width: 100%;
    }

    .tab tr:nth-of-type(2n) td {
        background: #EFF6FA
    }

    .tab td {
        background: #fff;
    }

    .tab td img {
        float: left;
    }

    .tab_left {
        margin-top: 10px;
        padding-left: 100px;
        background-size: 80px;
        background-repeat: no-repeat;
        background-position: 10px center;
    }

    .clear {
        clear: both;
    }

    .tab_left ul, .tab_left ul li, .tab_bottom ul {
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
        line-height: 24px;
        list-style: none;
    }

    .tab_bottom {
        margin: 10px 0
    }

    .tab_bottom ul li {
        margin: 0 1%;
        float: left;
        width: 30%;
        line-height: 30px;
        background-color: #3eafe0;
        color: #fff;
        border-radius: 3px;
        text-align: center;
    }

    .tab_bottom ul li.bg_color_01 {
        background-color: #59bc5e;
    }

    .tab_bottom ul li.bg_color_02 {
        background-color: #f8c969;
    }

    .tab_bottom ul li.bg_color_03 {
        background-color: #ed7764;
    }

    .tab_bottom ul li.bg_color_04 {
        background-color: #f0bec4;
    }

    .tab_bottom ul li.bg_color_06 {
        background-color: #b2b2b2;
    }

    .tab_bottom ul li.bg_color_06 {
        background-color: #2811a0;
    }

    .tab_bottom ul li:nth-child(2) {
        padding: 0 3%;
        padding: 0
    }

    .clred {
        font: normal;
        color: red
    }

    .clblue {
        font: normal;
        color: blue
    }

    th{
        text-align: left;
    }
    td{
        text-align: left;
    }

</style>


<title>BD测试管理</title>
</head>

<body>
<div id="mask" class="mask"></div>
<div id="saper-container">
    <div id="saper-hd"></div>
    <div id="saper-bd">
        <div class="subfiled clearfix">
            <h2>BD测试管理</h2>
        </div>
        <div class="subfiled-content">
            <table class="tab">
                <c:if test="${lstEquips != null}">
                    <c:forEach items="${lstEquips}" var="equip" varStatus="vs">
                        <tr style="background:#fff" data="${equip.equipId}" id="${equip.equipId}" class="equipdata">
                            <td>
                                <table class="tab1" style="margin:auto;margin:30px 5px;">
                                    <tr>
                                        <td width="160">${equip.equipName}</td>
                                        <td width="377">
                                            <div class="tab_left" style="background-image:url(${ctx}/imgs/1.png)">
                                                <ul>
                                                    <li>设备名称：<span class="clred">${equip.equipName}</span></li>
                                                        <%--<li>测试软件：<span class="clred"></span></li>--%>
                                                    <!-- <li>灭菌流水：<span class="clred">无</span></li> -->
                                                    <li>当前状态：<span class="clred">未开始</span></li>
                                                    <li><input type="hidden"></li>
                                                </ul>
                                                <div class="clear"></div>
                                            </div>
                                            <div class="tab_bottom">
                                                <ul id="eq${vs.count}">
                                                    <li class="bg_color_01 start" data="ad">开始</li>
                                                    <li class="bg_color_02 pause" style="display: none;">暂停</li>
                                                    <li class="bg_color_03 end" data="" style="display: none;">结束</li>
                                                    <li class="bg_color_05 buhege" data="${equip.equipId}"
                                                        style="display: none;">不合格
                                                    </li>
                                                    <li class="bg_color_04 hege" data="${equip.equipId}"
                                                        style="display: none;">合格
                                                    </li>
                                                    <li class="bg_color_06" style="display: none;">已合格</li>
                                                </ul>
                                                <!-- <div class="clear"></div> -->
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <div id="canvasDiv${vs.count}"></div>
                            </td>
                        </tr>
                    </c:forEach>
                </c:if>
            </table>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var equipSoft = ${equipSoft};
    var softMap = ${softMap};
    var equipList = ${equipList};

    $(window).load(function () {
        var tt = $(".tab").find(".equipdata");
        var btn = false;
        var equipId = null;
        var arra = [];
        for (var i = 0; i < tt.length; i++) {
            equipId = $(tt[i]).attr("data");
            bb = $(".tab").find('#' + equipId + '').find(".tab1").find("td:eq(1)");
            //$(bb).find(".tab_left").find("ul").find("li:eq(1)").find("span").text(softMap[equipSoft[equipId]]);
        }
        var aa = null;
        var cc = null;
        var dd = null;
        if (equipList.length != 0) {

            for (var k = 0; k < equipList.length; k++) {
                aa = $(".tab").find('#' + equipList[k][0] + '').find(".tab1").find("td:eq(1)");
                cc = $(aa).find(".tab_left").find("ul").find("li:eq(1)").find("span");
                dd = $(aa).find(".tab_bottom").find("ul");
                if (equipList[k][1] == 0) {
                    $(cc).text("未开始");
                    $(dd).find("li:eq(1)").css("display", "none");
                    $(dd).find("li:eq(2)").css("display", "none");
                    $(dd).find("li:eq(3)").css("display", "none");
                    $(dd).find("li:eq(4)").css("display", "none");
                    $(dd).find("li:eq(5)").css("display", "none");
                }
                if (equipList[k][1] == 1) {
                    $(cc).text("测试中");
                    $(dd).find("li:eq(0)").css("display", "none");
                    $(dd).find("li:eq(1)").css("display", "inline");
                    $(dd).find("li:eq(2)").css("display", "inline");
                    $(dd).find("li:eq(3)").css("display", "none");
                    $(dd).find("li:eq(4)").css("display", "none");
                    $(dd).find("li:eq(5)").css("display", "none");
                }
                if (equipList[k][1] == 2) {
                    $(cc).text("待审核");
                    $(dd).find("li:eq(0)").css("display", "none");
                    $(dd).find("li:eq(1)").css("display", "none");
                    $(dd).find("li:eq(2)").css("display", "none");
                    $(dd).find("li:eq(3)").css("display", "inline");
                    $(dd).find("li:eq(4)").css("display", "inline");
                    $(dd).find("li:eq(5)").css("display", "none");
                }
                if (equipList[k][1] == 3) {
                    $(cc).text("已合格");
                    $(dd).find("li:eq(0)").css("display", "none");
                    $(dd).find("li:eq(1)").css("display", "none");
                    $(dd).find("li:eq(2)").css("display", "none");
                    $(dd).find("li:eq(3)").css("display", "none");
                    $(dd).find("li:eq(4)").css("display", "none");
                    $(dd).find("li:eq(5)").css("display", "inline");
                }
            }
        }
    });

    $(function () {
        $(".start").click(function () {
            var equipId = $(this).closest(".equipdata").attr("data");
            var softId = equipSoft[equipId];
            var aa = $(this);
            var btn = true;
            showMask();
            if (btn) {
                $.ajax({
                    type: "post",
                    url: "${ctx}/equip/startCeshi.do?ceshiId=" + equipId + "&softId=" + softId,
                    error: function () {
                        layer.alert("网络故障，稍后再试");
                    },
                    success: function (data) {
                        if (data.state == "true") {
                            layer.msg("开始成功");
                            hideMask();
                            window.location.reload();
                        } else {
                            hideMask();
                            layer.msg(data.msg);
                        }
                    }
                });
            }
        });

        $(".end").click(function () {
            var status = 1;
            showMask();
            var equipid = $(this).closest(".equipdata").attr("data");
            var aa = $(this);
            $.ajax({
                type: "post",
                url: "${ctx}/equip/endCeshi.do?ceshiId=" + equipid,
                error: function () {
                    layer.alert("网络故障，稍后再试");
                },
                success: function (data) {
                    if (data.state == "true") {
                        layer.msg("结束成功");
                        hideMask();
                        window.location.reload();
                    } else {
                        layer.msg(data.msg);
                    }
                }
            });
        });

        $(".hege").click(function () {
            var equipId = $(this).attr("data");
            var hege = 1;
            $.ajax({
                type: "post",
                url: "${ctx}/equip/ceshiHege.do?ceshiId=" + equipId + "&hege=" + hege,
                error: function () {
                    layer.alert("网络故障，稍后再试");
                },
                success: function (data) {
                    if (data.state == "true") {
                        layer.msg("保存成功");
                        hideMask();
                        window.location.reload();
                    } else {
                        layer.msg(data.msg);
                    }
                }
            });
        });
        $(".buhege").click(function () {
            var equipId = $(this).attr("data");
            var hege = 2;
            $.ajax({
                type: "post",
                url: "${ctx}/equip/ceshiHege.do?ceshiId=" + equipId + "&hege=" + hege,
                error: function () {
                    layer.alert("网络故障，稍后再试");
                },
                success: function (data) {
                    if (data.state == "true") {
                        layer.msg("保存成功");
                        hideMask();
                        window.location.reload();
                    } else {
                        layer.msg(data.msg);
                    }
                }
            });
        });
        var flow = [];
        for (var i = 0; i < 61; i++) {
            flow.push(Math.floor(Math.random() * (30 + ((i % 12) * 5))) + 10);
        }

        var data = [
            {
                name: 'SL',
                value: flow,
                color: '#0d8ecf',
                line_width: 2
            }
        ];
        var labels = ["2012-12-01", "2012-12-02", "2012-12-03", "2012-12-04", "2012-12-05", "2012-12-06"];
        var chart = new iChart.LineBasic2D({
            render: 'canvasDiv1',
            data: data,
            align: 'center',
            title: {
                text: '设备运行曲线参数',
                fontsize: 24,
                color: '#dedede'
            },
            width: 650,
            height: 350,
            shadow: true,
            shadow_color: '#000000',
            shadow_blur: 4,
            shadow_offsetx: 0,
            shadow_offsety: 2,
            background_color: '#ffffff',
            tip: {
                enable: true,
                shadow: true
            },
            crosshair: {
                enable: true,
                line_color: '#62bce9'
            },
            sub_option: {
                label: false,
                hollow_inside: false,
                point_size: 8
            },
            coordinate: {
                width: 600,
                height: 260,
                grid_color: '#cccccc',
                axis: {
                    color: '#cccccc',
                    width: [0, 0, 2, 2]
                },
                grids: {
                    vertical: {
                        way: 'share_alike',
                        value: 5
                    }
                },
                scale: [{
                    position: 'left',
                    start_scale: 0,
                    end_scale: 100,
                    scale_space: 10,
                    scale_size: 2,
                    label: {color: '#000000', fontsize: 11},
                    scale_color: '#9f9f9f'
                }, {
                    position: 'bottom',
                    label: {color: '#000000', fontsize: 11},
                    labels: labels
                }]
            }
        });
        var chart2 = new iChart.LineBasic2D({
            render: 'canvasDiv2',
            data: data,
            align: 'center',
            title: {
                text: '设备运行曲线参数',
                fontsize: 24,
                color: '#dedede'
            },
            width: 650,
            height: 350,
            shadow: true,
            shadow_color: '#000000',
            shadow_blur: 4,
            shadow_offsetx: 0,
            shadow_offsety: 2,
            background_color: '#eff6fa',
            tip: {
                enable: true,
                shadow: true
            },
            crosshair: {
                enable: true,
                line_color: '#62bce9'
            },
            sub_option: {
                label: false,
                hollow_inside: false,
                point_size: 8
            },
            coordinate: {
                width: 600,
                height: 260,
                grid_color: '#cccccc',
                axis: {
                    color: '#cccccc',
                    width: [0, 0, 2, 2]
                },
                grids: {
                    vertical: {
                        way: 'share_alike',
                        value: 5
                    }
                },
                scale: [{
                    position: 'left',
                    start_scale: 0,
                    end_scale: 100,
                    scale_space: 10,
                    scale_size: 2,
                    label: {color: '#000000', fontsize: 11},
                    scale_color: '#9f9f9f'
                }, {
                    position: 'bottom',
                    label: {color: '#000000', fontsize: 11},
                    labels: labels
                }]
            }
        });
        var chart3 = new iChart.LineBasic2D({
            render: 'canvasDiv3',
            data: data,
            align: 'center',
            title: {
                text: '设备运行曲线参数',
                fontsize: 24,
                color: '#dedede'
            },
            width: 650,
            height: 350,
            shadow: true,
            shadow_color: '#000000',
            shadow_blur: 4,
            shadow_offsetx: 0,
            shadow_offsety: 2,
            background_color: '#ffffff',
            tip: {
                enable: true,
                shadow: true
            },
            crosshair: {
                enable: true,
                line_color: '#62bce9'
            },
            sub_option: {
                label: false,
                hollow_inside: false,
                point_size: 8
            },
            coordinate: {
                width: 600,
                height: 260,
                grid_color: '#cccccc',
                axis: {
                    color: '#cccccc',
                    width: [0, 0, 2, 2]
                },
                grids: {
                    vertical: {
                        way: 'share_alike',
                        value: 5
                    }
                },
                scale: [{
                    position: 'left',
                    start_scale: 0,
                    end_scale: 100,
                    scale_space: 10,
                    scale_size: 2,
                    label: {color: '#000000', fontsize: 11},
                    scale_color: '#9f9f9f'
                }, {
                    position: 'bottom',
                    label: {color: '#000000', fontsize: 11},
                    labels: labels
                }]
            }
        });
        //开始画图
        chart.draw();
        chart2.draw();
        chart3.draw();
    });

    //拖拽进行移动li的位置：
    var ullength = $(".qxtable").find("ul")//找到table里面的每个ul进行赋值

    ullength.sortable({
        revert: true
    });
    ullength.find("li").disableSelection(); //找到每个ul里面的Li进行拖拽操作；

    /* function callbackQxData(chk_value,id){
     console.log(chk_value);
     console.log(id);
     $("#"+id).children("li[id='pause']").css("display","inline");
     $("#"+id).children("li[id='start']").css("display","none");
     $("#"+id).children("li[id='end']").attr("data",chk_value);
     } */
    function isNullOrEmpty(strVal) {
        strVal = strVal.replace(/(^\s*)|(\s*$)/g, "");
        if (strVal == '' || strVal == null || strVal == undefined) {
            return true;
        } else {
            return false;
        }
    }
</script>
</html>